{extend name="layout" /}
{block name="content"}
<div class="mui-content">
	<!--block-->
	<div class="tm-label-md tm-bg-white tm-df-size">
		<div class="main-tab">
			<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-item1">
				<a class="mui-control-item tm-icon-btn mui-active" href="#item1">
					<div class="tm-label-item">
						<div class="tm-label">
							所有成员
						</div>
						<div class="mui-icon mui-icon-arrowdown">

						</div>
					</div>
				</a>
				<a class="mui-control-item tm-icon-btn" href="#item2">
					<div class="tm-label-item">
						<div class="tm-label">
							{$addday}
						</div>
						<div class="mui-icon mui-icon-arrowdown">

						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
	<!--block end-->
	<!--tab-con-->
	<div class="main-tab-con" id="main-tab-con" style="display: none;">
		<div id="item1" class="mui-control-content mui-active">
			<div class="data-card-search uk-margin-small-top">
				<!--search-->
				<div class="search-block">
					<div class="mui-input-row mui-search">
						<input type="search" class="mui-input-clear" value="" placeholder="搜索">
					</div>
				</div>
				<!--search end-->
				<div class="search-cell-card">
					<ul class="mui-table-view max">
						{volist name="ulist" id="v"}
						<li class="mui-table-view-cell">
							<!-- <a href="{:setAppUrls('/index/client/data_stat/userid/'.$v.userid)}"> -->
							<a href="{:url('data_stat', ['token'=>$token, 'timestamp'=>time(), 'userid'=>$v.userid])}">
								<div class="tm-flex flex-align-center">
									<div class="tm-atav tm-flex-head">
										<div class="tm-location-parent">
											<div class="tm-location-img" style="background-image: url({$v.avatar});">
											</div>
											<img class="redundant-img" src="{$images_path}px-1.png" alt="" width="100">
										</div>
									</div>
									<div class="tm-label-no">
										<span class="tm-df-size tm-font-boldx">{$v.realname}</span>
									</div>
								</div>
							</a>
						</li>
						{/volist}
					</ul>
				</div>
			</div>
		</div>
		<div id="item2" class="mui-control-content">
			<div class="tm-df-size">
				<div class="mui-table-view no uk-margin-small-top">
					<div class="mui-table-view-cell">
						<a class="mui-navigate-right">
							<div class="tm-cell-pad">
								<div class="tm-flex">
									<div class="tm-flex-1">
										<span class="tm-font-bold">选择日期</span>
									</div>
									<div class="">
										<input type="month" name="addday" value="{$addday}"
											style="width: 100px;height: 30px;padding: 0px;border: none;"
											onchange="change_month(this.value)">
									</div>
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="uk-margin-xlarge-top">
				<div class="main-content">
					<div class="to-btn-group">
						<ul class="uk-grid tm-font-gray">
							<li class="uk-width-1-2">
								<button type="button" class="mui-btn mui-btn-green mui-btn-block"
									onclick="change_month('{$addday}', -1)">上一月</button>
							</li>
							<li class="uk-width-1-2">
								<button type="button" class="mui-btn mui-btn-green mui-btn-block"
									onclick="change_month('{$addday}', 1)">下一月</button>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--tab-con end-->

	<!--点击筛选消失-->
	<div class="tm-border-top" id="hide-this">
		<!--block-->
		<div class="data-info-card tm-bg-white">
			<div class="tm-label-lg">
				<div class="tm-flex">

					<div class="card-tab-item">
						<div class="tm-flex flex-pack-center">
							<div class="tm-flex-row-lgm">
								<div class="tm-flex flex-pack-center">
									<div class="tm-label-item uk-text-center">
										<span class="tm-label tm-font-green tm-mx-size">{$info.clients ? $info.clients : 0}</span><span class="tm-label tm-df-size tm-font-gray">个</span>
									</div>
								</div>
								<div class="tm-flex-row-lgm">
									<div class="tm-flex flex-pack-center">
										<div class="tm-icon-item">
											<div class="tm-icon">
												<img src="{$images_path}data-info-icon1.png" alt="" width="12"
													height="12" />
											</div>
											<div class="tm-icon-label">
												新增客户数
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- <div class="card-tab-item">
						<div class="tm-flex flex-pack-center">
							<div class="tm-flex-row-lgm">
								<div class="tm-flex flex-pack-center">
									<div class="tm-label-item uk-text-center">
										<span class="tm-label tm-font-green tm-mx-size">{$info.orders ? $info.orders :
											0}</span><span class="tm-label tm-df-size tm-font-gray">单</span>
									</div>
								</div>
								<div class="tm-flex-row-lgm">
									<div class="tm-flex flex-pack-center">
										<div class="tm-icon-item">
											<div class="tm-icon">
												<img src="{$images_path}data-info-icon2.png" alt="" width="12"
													height="12" />
											</div>
											<div class="tm-icon-label">
												成交单数
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div> -->

					<div class="card-tab-item">
						<div class="tm-flex flex-pack-center">
							<div class="tm-flex-row-lgm">
								<div class="tm-flex flex-pack-center">
									<div class="tm-label-item uk-text-center">
										<span class="tm-label tm-font-green tm-mx-size">{$info.suc_clients ?
											$info.suc_clients : 0}</span><span
											class="tm-label tm-df-size tm-font-gray">个</span>
									</div>
								</div>
								<div class="tm-flex-row-lgm">
									<div class="tm-flex flex-pack-center">
										<div class="tm-icon-item">
											<div class="tm-icon">
												<img src="{$images_path}data-info-icon3.png" alt="" width="12"
													height="12" />
											</div>
											<div class="tm-icon-label">
												成交客户数
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--block tab切換-->
		<div class="tm-label-md tm-bg-white uk-margin-small-top">
			<div class="main-content">
				<div class="main-tab">
					<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-itme2">
						<a class="mui-control-item tm-icon-btn mui-active" href="#item100">
							<div class="tm-label-item">
								<div class="tm-label">
									新增客户榜
								</div>
							</div>
						</a>
						<a class="mui-control-item tm-icon-btn" href="#item300">
							<div class="tm-label-item">
								<div class="tm-label">
									成交客户榜
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="main-tab-con">

			<!--切换1-->
			<div id="item100" class="mui-control-content">
				<div class="rankings-card">
					<ul class="mui-table-view max">
						{volist name="list" id="v" key="k"}
						<li class="mui-table-view-cell">
							<div class="tm-flex">
								<div class="tm-flex-1">
									<div class="tm-flex flex-align-center">
										<div class="rankings-number tm-flex-head">
											{switch name="$k"}
											{case value="1"}
											<div class="tm-icon">
												<img src="{$images_path}jinpai.png" alt="" width="19" height="19" />
											</div>
											{/case}
											{case value="2"}
											<div class="tm-icon">
												<img src="{$images_path}yinpai.png" alt="" width="19" height="19" />
											</div>
											{/case}
											{case value="3"}
											<div class="tm-icon">
												<img src="{$images_path}tongpai.png" alt="" width="19" height="19" />
											</div>
											{/case}
											{default /}
											{$k}
											{/switch}
										</div>
										<!-- <div class="tm-atav tm-flex-head">
											<div class="tm-location-parent">
												<div class="tm-location-img"
													style="background-image: url({$v.carthumb});"></div>
												<img class="redundant-img" src="{$images_path}px-1.png" alt=""
													width="100">
											</div>
										</div> -->
										<div class="tm-df-size">
											{$v.name}
										</div>
									</div>
								</div>
								<div class="last-padding">
									<div class="tm-df-size tm-font-green">
										{$info.clients}
									</div>
								</div>
							</div>
						</li>
						{/volist}
					</ul>
				</div>
			</div>

			<!--切换2-->
			<div id="item300" class="mui-control-content mui-active">
				<div class="rankings-card">
					<ul class="mui-table-view max">
						{volist name="suc_list" id="v" key="k"}
						<li class="mui-table-view-cell">
							<div class="tm-flex">
								<div class="tm-flex-1">
									<div class="tm-flex flex-align-center">
										<div class="rankings-number tm-flex-head">
											{switch name="$k"}
											{case value="1"}
											<div class="tm-icon">
												<img src="{$images_path}jinpai.png" alt="" width="19" height="19" />
											</div>
											{/case}
											{case value="2"}
											<div class="tm-icon">
												<img src="{$images_path}yinpai.png" alt="" width="19" height="19" />
											</div>
											{/case}
											{case value="3"}
											<div class="tm-icon">
												<img src="{$images_path}tongpai.png" alt="" width="19" height="19" />
											</div>
											{/case}
											{default /}
											{$k}
											{/switch}
										</div>
										<!-- <div class="tm-atav tm-flex-head">
											<div class="tm-location-parent">
												<div class="tm-location-img"
													style="background-image: url({$v.carthumb});"></div>
												<img class="redundant-img" src="{$images_path}px-1.png" alt=""
													width="100">
											</div>
										</div> -->
										<div class="tm-df-size">
											{$v.name}
										</div>
									</div>
								</div>
								<div class="last-padding">
									<div class="tm-df-size tm-font-green">
										{$info.suc_clients}
									</div>
								</div>
							</div>
						</li>
						{/volist}
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	function change_month(value, next) {
		location.href = setAppUrls("/index/client/data_stat/addday/" + value + "/nextmonth/" + next);
	}
	$(function () {
		$(".mui-segmented-control-item1>.mui-control-item").on("tap", function () {
			$("#main-tab-con").show();
			$("#hide-this").hide();
		})
	})
</script>
{/block}